<template>
	<view class="container">
		<view class="address_box" @click="$gourl('/mallPage/address/addressList?isType=select')">
			<view class="address">
				<view class="big">
					<u-icon name="map" color="#EA3D37" size="36" style="margin-right: 20rpx;"></u-icon>
					<div style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
						<view v-if="address">{{address.detail}}
						</view>
						<view v-else>暂无收货地址</view>
						<u-icon name="arrow-right" color="#777"></u-icon>
					</div>
				</view>
				<view class="small">
					<view style="width: 36rpx;margin-right: 20rpx;"></view>
					<view v-if="address">{{address.real_name+' '+address.phone}}</view>
					<view v-else>添加收货地址</view>
				</view>
			</view>
		</view>
		<view class="ps_time_box">
			<view class="title">选择配送时间</view>
			<view class="contents">
				<view class="liji time_box" :class="timeCurrent == 0?'active':''" @click="timeTab(0)">
					<view class="">
						<view class="big">立即送出</view>
						<view class="small">30分钟内送达</view>
					</view>
				</view>
				<view class="yuyue time_box" :class="timeCurrent == 1?'active':''" @click="timeTab(1)">
					<view>
						<view class="big">预约送达</view>
						<view class="small" v-if="timeCurrent == 1 && timeInfo">
							{{`${timeInfo.month}月${timeInfo.day}日 ${timeInfo.hour}:${timeInfo.minute}:00`}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ztd_box" style="margin-top: 20rpx;background: #fff;padding: 20rpx;">
			<view class="box_top">
				<view class="title">商品清单</view>
				<view class="num">{{tempCarInfo.length}}件商品</view>
			</view>
			<view class="small_info" v-for="(item,index) in tempCarInfo" :key="index">
				<image :src="item.productInfo.image" mode="aspectFill"></image>
				<view class="infos">
					<view class="name">{{item.productInfo.store_name}}</view>
					<view class="sku">{{item.productInfo.attrInfo.suk}}</view>
					<view class="num_a_wd">
						<view>x{{item.cart_num}}</view>
						<view class="wd_box" v-if="item.bd_value !== ''"><text class="ice"
								style="margin-right: 10rpx;">冰冻{{item.bdInfo.bd}}</text>|<text
								style="margin-left: 10rpx;">常温{{item.bdInfo.cw}}</text>
						</view>
					</view>
				</view>
				<view class="price_box">
					<view>
						<view class="big_price"><text>￥</text>{{item.productInfo.attrInfo.price}}</view>
						<view class="small_price"><text>￥</text>{{item.productInfo.attrInfo.ot_price}}</view>
					</view>
				</view>
			</view>
			<view class="quan_box">
				<view class="left">
					<view class="zi">券</view>优惠券
				</view>
				<view @click="goSelectCoupon">已减{{couponInfo?couponInfo.coupon_price:0}}元<u-icon name="arrow-right"
						style="margin-left: 20rpx;"></u-icon>
				</view>
			</view>
			<!-- <view class="quan_box">
				<view class="left">
					<view class="zi">积</view>
					<view style="color: #999;">预计购物可获得{{tempCarInfo.score}}积分</view>
				</view>
			</view> -->
		</view>
		<view class="small_in zj" style="border-top: 1px solid #f3f3f3;">
			<view class="title"></view>
			<view class="small">
				<view class="youhui">共优惠<text>￥{{couponInfo?couponInfo.coupon_price:0}}</text></view> 合计：<text
					class="price">￥{{total_price}}</text>
			</view>
		</view>
		<view class="quan_box small_in" style="margin-top: 20rpx;">
			<view class="left">
				<view class="zi">票</view>
			</view>
			<view @click="$gourl('/otherPage/invoice/invoiceList')">
				{{invoiceInfo?invoiceInfo.company_name:'选择发票'}}<u-icon name="arrow-right"
					style="margin-left: 20rpx;"></u-icon>
			</view>
		</view>
		<view class="small_in bz">
			<input type="text" placeholder="备注留言(选填)" v-model="remark">
		</view>
		<view class="footer">
			<view style="font-size: 24rpx;padding-left: 20rpx;">
				应付：<text style="color: #EA3D37;font-weight: bold;">￥<text
						style="font-size: 30rpx;">{{total_price}}</text></text>
			</view>
			<view class="pay_bgn" @click="createOrder">提交订单</view>
		</view>
		<u-picker v-model="timeShow" mode="time" :params="params" @confirm="timeConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: null,
				total_price: 0,
				timeCurrent: 0,
				timeShow: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true
				},
				remark: '',
				num: 0,
				carId: 0,
				current: 0,
				tempCarInfo: [],
				tempCar: [],
				couponInfo: null,
				invoiceInfo: null,
				orderKey: '',
				ids: [],
				orderInfo: null,
				timeInfo: null
			}
		},
		onLoad(opdata) {
			this.carId = opdata.car_id
			this.addTempCar()
		},
		onShow() {
			if (getApp().selectAddress) {
				this.address = JSON.parse(getApp().selectAddress)
				this.computedMoney()
				this.$forceUpdate()
			}
			if (getApp().selectCoupon) {
				this.couponInfo = JSON.parse(getApp().selectCoupon)
				this.computedMoney()
				this.$forceUpdate()
			}
			if (getApp().selectInvoice) {
				this.invoiceInfo = JSON.parse(getApp().selectInvoice)
				this.$forceUpdate()
			}
		},
		methods: {
			timeConfirm(e) {
				const timestamp = new Date().getTime();
				if (e.timestamp < timestamp / 1000) {
					this.$u.toast('预约送达时间不能小于当前时间')
					this.timeCurrent = 0
					return
				}
				this.timeInfo = e
			},
			timeTab(index) {
				this.timeCurrent = index
				if (index == 1) {
					this.timeShow = true
				}
			},
			goSelectCoupon() {
				getApp().couponList = JSON.stringify(this.tempCarInfo.coupon)
				this.$gourl('/mallPage/couponList')
			},
			async addTempCar() {
				await this.$allApi.getAddTempCar({
					cartId: this.carId
				}).then(res => {
					this.tempCarInfo = res.data.cartInfo
					for (let item of this.tempCarInfo) {
						item.bdInfo = {}
						item.bdInfo = JSON.parse(item.bd_value)
						if (item.bdInfo.type == '全冰') {
							item.bdInfo.bd = item.cart_num * item.productInfo.attrInfo.num
							item.bdInfo.cw = 0
						} else if (item.bdInfo.type == '一半冰一半不冰') {
							item.bdInfo.bd = Math.ceil(item.cart_num * item.productInfo.attrInfo.num / 2)
							item.bdInfo.cw = item.cart_num * item.productInfo.attrInfo.num - item.bdInfo.bd
						} else if (item.bdInfo.type == '常温') {
							item.bdInfo.bd = 0
							item.bdInfo.cw = item.cart_num * item.productInfo.attrInfo.num
						} else if (item.bdInfo.type == '自定义冰冻数量') {
							item.bdInfo.bd = Math.ceil(item.cart_num * item.productInfo.attrInfo.num * item
								.bdInfo.bfNumber)
							item.bdInfo.cw = item.cart_num * item.productInfo.attrInfo.num - item.bdInfo.bd
						}
					}
					this.address = res.data.addressInfo
					this.couponInfo = res.data.usableCoupon
					this.orderKey = res.data.orderKey
					this.orderInfo = res.data
					this.computedMoney()
				})
			},
			async computedMoney() {
				let data = {
					addressId: this.address?.id | null,
					couponId: this.couponInfo?.id | null,
					payType: 'weixin',
					useIntegral: 0
				}
				let prams = {
					key: this.orderKey,
					data: data
				}
				await this.$allApi.computedMoney(prams).then(res => {
					this.total_price = res.data.result.pay_price.toFixed(2)
				})
			},
			createOrder() {
				console.log(123123);
				if (!this.address) {
					this.$u.toast('请选择收货地址')
					return
				}
				uni.showLoading({
					title: '订单生成中'
				})

				let data = {
					invoiceId: this.invoiceInfo?.id || null,
					payType: 'weixin',
					from: 'weixin',
					addressId: this.address.id,
					couponId: this.couponInfo?.id || null,
					deliveryTime: this.timeCurrent == 0 ? 1 :
						`${this.timeInfo.month}-${this.timeInfo.day} ${this.timeInfo.hour}:${this.timeInfo.minute}:00`,
					mark: this.remark
				}
				let prmas = {
					key: this.orderInfo.orderKey,
					data: data
				}
				this.$allApi.createOrder(prmas).then(orderRes => {
					uni.hideLoading()
					console.log(orderRes);
					// this.$u.toast('订单创建成功')
					// setTimeout(() => {
					// 	this.$gourl('/pages/index/mine', 2)
					// }, 1500)
					this.pay(orderRes.data.result.orderId)
				})
			},
			pay(orderId) {
				this.$allApi.submitOrderPay({
					uni: orderId,
					from: 'routine'
				}).then(res => {
					console.log(res);
					let pay = res.data.result.jsConfig
					console.log(pay);
					uni.requestPayment({
						timeStamp: pay.timestamp, // 时间戳（单位：秒）
						nonceStr: pay.nonceStr, // 签名算法，这里用的 MD5/RSA 签名
						package: pay.package, // 固定值
						signType: pay.signType, // 签名算法，这里用的 MD5/RSA 签名
						paySign: pay.paySign, //签名
						// 支付成功的回调
						success: payRes => {
							console.log(payRes)
							if (payRes.errMsg == "requestPayment:ok") {
								uni.showToast({
									icon: "success",
									title: "支付成功！"
								})
								setTimeout(() => {
									this.$gourl('/mallPage/order/orderList', 3)
								}, 2000)
							}

						},
						// 支付失败回调
						fail: err => {
							console.log(err);
							uni.showToast({
								icon: "none",
								title: "支付失败"
							})
							setTimeout(() => {
								this.$gourl('/mallPage/order/orderList', 0)
							}, 2000)
						}
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.quan_box {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #F3F3F3;
		margin-top: 20rpx;
		color: #999;

		.left {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;

			.zi {
				width: 48rpx;
				height: 48rpx;
				border-radius: 4rpx;
				background: #EA3D37;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #fff;
				margin-right: 20rpx;
			}
		}
	}

	.box_top {
		font-size: 28rpx;
		color: #333;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding-bottom: 10rpx;

		.num {
			font-size: 20rpx;
			color: #666;
			margin-left: 20rpx;
		}
	}

	.yuan {
		width: 48rpx;
		height: 48rpx;
		border: 1px solid #aaa;
		border-radius: 50%;
	}

	.container {
		min-height: calc(100vh - 120rpx);
		padding-bottom: 120rpx;
		background: #f6f6f6;
	}

	.ps_time_box {
		background: #fff;
		padding: 20rpx 0;
		border-top: 1px solid #F3F3F3;

		.title {
			font-size: 28rpx;
			padding-left: 52rpx;
			margin-bottom: 16rpx;
		}

		.contents {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.time_box {
				width: 324rpx;
				height: 112rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #A7A7A7;
				border-radius: 10rpx;

				.big {
					text-align: center;
					font-size: 28rpx;
				}

				.small {
					font-size: 24rpx;
					text-align: center;
				}
			}

			.active {
				color: #EA3D37;
				border-color: #EA3D37;
				background: rgba(234, 61, 55, 0.08);
			}
		}

	}

	.address_box {
		// #ifdef MP
		margin-top: 20rpx;
		// #endif
		padding: 20rpx;
		background: #fff;

		.dp {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.address {
			flex: 1;
			margin-right: 20rpx;
			line-height: 1.5;

			.big {
				font-size: 30rpx;
				padding-bottom: 20rpx;
				// border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.small {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.small_info {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
		}

		.price_box {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: right;

			.big_price {
				font-size: 40rpx;

				text {
					font-size: 24rpx;
				}
			}

			.small_price {
				font-size: 28rpx;
				color: #666;
				text-decoration: line-through;

				text {
					font-size: 16rpx;
				}
			}
		}

		.infos {
			flex: 1;
			padding-left: 20rpx;
			width: 596rpx;
			line-height: 1.8;

			.name {
				font-size: 24rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.sku {
				font-size: 20rpx;
				color: #666;
			}
		}

		.num_a_wd {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 24rpx;

			.wd_box {
				display: flex;
				margin-left: 20rpx;
				align-items: center;
				justify-content: center;
				background: #F6F6F7;
				height: 36rpx;
				border-radius: 6rpx;
				font-size: 20rpx;
				padding: 0 14rpx;

				.ice {
					color: #26ACF5;
				}
			}
		}
	}

	.miaosu {
		font-size: 24rpx;
		color: #999;
	}

	.small_in {
		background: #fff;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 20rpx;
		line-height: 80rpx;
		margin-bottom: 1px;

		.small {
			font-size: 26rpx;
			display: flex;

			.youhui {
				font-size: 20rpx;
				margin-right: 20rpx;

				text {
					color: #EA3D37;
				}
			}
		}

		.price {
			font-size: 32rpx;
			font-weight: normal !important;
			color: #333 !important;
		}
	}

	.zj {
		.price {
			color: #EA3D37;
		}
	}

	.bz {
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			text-align: left;
		}
	}

	.mask_box {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.box_title {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
		padding: 30rpx 0;
	}

	.pay {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding: 30rpx;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 1px;

		.title {
			font-size: 30rpx;
			// display: flex;
			// align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}
		}

		.select {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.footer {
		position: fixed;
		z-index: 99;
		background: #fff;
		width: 100vw;
		height: 120rpx;
		left: 0;
		bottom: 0;
		border-top: 1px solid #eee;
		padding-bottom: calc(-30rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;

		.pay_bgn {
			width: 220rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #EA3D37;
		}
	}
</style>